<template>
  <div class="adjustPassenger">
    <el-form :model="thequery"  ref="thequery" size="mini" style="margin: 0 0 20px 10px">
      <div style="display: flex">
         <!-- <el-form-item
          label="城市代码"
          style="display: flex; margin: 0 20px 0 0">
        <el-select v-model="ruleForm.name" placeholder="请选择">
            <el-option
              v-for="(item,index) in querySearch"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item
          label="航空公司"
          style="display: flex; margin: 0 20px 0 0">
         <el-select v-model="thequery.airlineCode" filterable clearable  placeholder="请选择">
           <el-option
              v-for="item in airportLists"
              :key="item.airlinerId"
              :label="item.airliner"
              :value="item.airlinerId">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item
          label="出票途径"
          style="display: flex; margin: 0 20px 0 0">
         <el-select clearable v-model="thequery.ticketingChannel"  placeholder="请选择">
           <el-option
              v-for="item in issuebill"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
       <div style="display: flex;margin:15px 0 0 0">
           <el-form-item
              label="开始时间"
              style="display: flex; margin: 0 20px 0 0">
               <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="mini"
                  style="width: 140px"
                  v-model="thequery.startTime"
                  type="date"
                  placeholder="选择日期" >
             </el-date-picker>
           </el-form-item>
            <el-form-item
              label="结束时间"
              style="display: flex; margin: 0 20px 0 0">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  size="mini"
                  style="width: 140px"
                  v-model="thequery.endTime"
                  type="date"
                  placeholder="选择日期" >
             </el-date-picker>
           </el-form-item>
         <el-form-item style="margin: 0 20px 0 50px">
          <el-button type="primary" size="mini" @click="searchBtn">查询</el-button>
          <el-button type="primary" size="mini" @click="newairPort">新增</el-button>
          <!-- <el-button type="primary" size="mini" @click="whitelist">大客户白名单管理</el-button> -->
        </el-form-item>
       </div>
       
         
    </el-form>
    <!-- 用户列表区 -->
    <el-table
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      :data="auxiliary" size="mini" border  stripe >
      <el-table-column label="编号" prop="adjustId" width="120" ></el-table-column>
      <el-table-column label="航空公司" prop="airlinerId" width="130"></el-table-column>
      <el-table-column width="150" label="舱位" prop="cabin" ></el-table-column>
      <!-- <el-table-column label="出发地"  width="120" prop="airportCityName"></el-table-column> -->
      <!-- <el-table-column label="到达地" width="120" prop="airportCityPinyin"></el-table-column> -->
      <el-table-column label="航班号" width="120" prop="flightno"></el-table-column>
       <el-table-column label="出票途径" width="120" prop="ticketingChannel">
         <template slot-scope="scope">
         <template v-if="scope.row.ticketingChannel=='1'">BPS</template>
         <template v-if="scope.row.ticketingChannel=='2'">B2B</template>
         <template v-if="scope.row.ticketingChannel=='3'">外购</template>
         <template v-if="scope.row.ticketingChannel=='4'">航空直连</template>
         <template v-if="scope.row.ticketingChannel=='5'">全部</template>
         <template v-if="scope.row.ticketingChannel=='6'">三方协议</template>
         <template v-if="scope.row.ticketingChannel=='7'">航司客服改期</template>
         </template>
       </el-table-column>

        <el-table-column label="开始时间"  prop="starttime"> 
        <template slot-scope="scope">
          {{ showcreatTime(scope.row.starttime) }}
        </template>
        </el-table-column>
      <el-table-column label="结束时间"  prop="endtime">
         <template slot-scope="scope">
          {{ showcreatTime(scope.row.endtime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" >
        <template slot-scope="scope">
          <el-popconfirm
            title="确定删除该条机场信息吗？"
            @confirm="deleteairPortList"
          >
            <el-button
              slot="reference"
              type="primary"
              @click="deleteairPort(scope.row)"
              size="mini"
              >删除</el-button
            >
            <el-button
              slot="reference"
              type="primary"
              @click="whitelist(scope.row)"
              size="mini"
              >修改</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
     
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "adjustPassenger",
  data() {
    return {
      // id
      adjustId: "",
      // 适用乘客
      apply: 3,
      // 出票途径
      issuebill: [
        {
          value: "1",
          label: "BPS",
        },
        {
          value: "2",
          label: "B2B",
        },
        {
          value: "3",
          label: "外购",
        },
        {
          value: "4",
          label: "航空直连",
        },
        {
          value: "5",
          label: "全部",
        },
        {
          value: "6",
          label: "三方协议",
        },
        {
          value: "7",
          label: "航司客服改期",
        },
      ],
      // 校验
      rules: {
        name: [
          { required: true, message: "请选择航空公司", trigger: "change" },
        ],
        account: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        attachment: [
          { required: true, message: "请输入附件", trigger: "blur" },
        ],
        city: [
          { required: true, message: "选择账号所属城市", trigger: "change" },
        ],
      },
      // 新增
      ruleForm: {},
      // 弹窗
      dialogVisible: false,
      // 城市
      querySearch: [],
      //航空公司
      airportLists: [],
      // 搜索条件
      thequery: {
        cityId: "",
        airlineCode: "",
        ticketingChannel: "",
        startTime: "",
        endTime: "",
      },
      // 表格数组
      auxiliary: [],
      // 分页
      total: 0,
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
    };
  },
  methods: {
    // 时间显示
    showcreatTime(val) {
      var val1 = val.split(".");
      var val2 = val1[0].split("T").join(" ");
      return val2;
    },
    // 列表
    getflightAdjustList() {
      localStorage.setItem("pageNum", this.currentPage);
      localStorage.setItem("pageSize", this.pageSize);
      this.$axios
        .getflightAdjustList({
          cityId: Number(this.thequery.cityId),
          airlineCode: this.thequery.airlineCode,
          ticketingChannel: this.thequery.ticketingChannel,
          startTime: this.thequery.startTime,
          endTime: this.thequery.endTime,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.auxiliary = res.data;
            this.pageTotal = res.total;
          }
        });
    },
    // 修改
    whitelist(row) {
      console.log(row);
      this.$router.push({
        name: "bigcustomers",
        params: {
          adjustId: row.adjustId,
        },
      });
    },

    // 删除按钮
    deleteairPort(row) {
      console.log(row);
      this.idList = row.adjustId;
    },
    // 删除弹窗的点击事件
    deleteairPortList() {
      this.getdelAdjustPassengerVo();
    },
    // 删除接口
    getdelAdjustPassengerVo() {
      this.$axios
        .getdelAdjustPassengerVo({
          id: this.idList,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.searchBtn()
          }
        });
    },
    
    // 新增按钮
    newairPort() {
      this.$router.push({
        name: "channelList",
      });
    },
    // 城市
    getselectCityList() {
      this.$axios.getselectCityList({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let list = JSON.parse(JSON.stringify(res.data));
          this.querySearch = list.map((item) => {
            return { label: item.cityName, value: item.cityId };
          });
          console.log(this.querySearch);
        }
      });
    },
    // 航空公司列表
     getairportList() {
    
      this.$axios.getqueryAirlinerSelect({}).then((res) => {
         localStorage.setItem("pageNum", 1);
        localStorage.setItem("pageSize", 10);
        console.log(res);
        if (res.code == "200") {
          // let list = JSON.parse(JSON.stringify(res.data));
          // this.airportLists = list.map((item) => {
          //   return { label: item.airliner, value: item.id };
          // });
          this.airportLists =res.data
          console.log(this.airportLists);
        }
      });
    },
    //分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.getflightAdjustList();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("2", value);

      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.currentPage = value;
      this.getflightAdjustList();
      
      // orders = res.data;
    },
    searchBtn() {
      localStorage.setItem("pageNum",1);
      localStorage.setItem("pageSize", 10);
      this.getflightAdjustList();
    },
  },
  mounted() {
    // 城市
    // this.getselectCityList()
    // 表格数据
    this.getflightAdjustList();
     // 航空公司
    this.getairportList();
  },
};
</script>

<style  scoped>
.adjustPassenger {
  margin: 20px;
}
</style>